<template>
	<view>
		<view class="faddishBaner">
			<swiper class="swiper" :indicator-dots="false" autoplay interval="2000" duration="1000" circular indicator-active-color="#E25A29">
				<swiper-item v-if="!swiperList.length" class="swiperItem">
					<image src="/static/images/banner2.png"></image>
				</swiper-item>
				<swiper-item v-else @click="goToGood(item.url)" v-for="(item, index) in swiperList" :key="index" class="swiperItem">
					<image :src="item.pic" />
				</swiper-item>
			</swiper>
		</view>

		<view class="faddishBody">
			<view class="faddishList">
				<view @click="goGoodDetail(item.product_id)" v-for="(item, index) in bestList" :key="index" class="faddishItem">
					<view class="itemTop"><image :src="item.image"></image></view>

					<view class="itemDtail">
						<view class="itemTitle">{{ item.store_name }}</view>
						<view class="itemOriginal">
							<text>原价 :</text>
							<text>￥{{ item.ot_price }}</text>
						</view>
						<!-- <view class="itemBtm" style="font-size: 24rpx;margin-bottom: 5rpx;">
							最大¥{{ item.integral }}车币抵扣
						</view> -->
						<view class="itemBtm">
							<view class="itemPrice">
								<text>¥{{ item.price - item.integral }}</text>
								<text v-if="item.integral" style="color: #fa4e44;">+{{ item.integral }}</text>
								<text v-if="item.integral" style="font-size: 24rpx;color: #fa4e44;">(车币)</text>
							</view>
							<view class="itemShop iconfont icon-gouwuche1"><!-- <image src="/static/images/shop-car.png"></image> --></view>
						</view>
					</view>
				</view>
			</view>
			<view class="over_line" v-if="isover">----- 我也是有底线的 ------</view>
			<view v-if="!bestList.length" class="notAvailable">暂无商品~</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bestList: [],
			pagenum: 1, // 页码值
			pagesize: 20, // 每页显示多少条数据
			total: '',
			isover: false, // 判断是否到底部，给用户提示
			isloading: false, // 判断数据是否在加载中
			swiperList:[]
		};
	},
	onLoad() {
		this.getAdvertising();
		this.getProductBest();
	},
	methods: {
		// 获取广告位抵扣商品
		getAdvertising() {
			this.$api.getAdvertising({
				label:'discount'
			},res => {
				this.swiperList = res.data
			})
		},
		
		// 获取抵扣商品
		getProductBest() {
			// 正在加载下页数据
			this.isloading = true;
			this.$api.getDeductionShop(
				{
					page: this.pagenum,
					limit: this.pagesize
				},
				res => {
					this.total = res.data.count;
					this.bestList = [...this.bestList, ...res.data.list];
					this.bestList.forEach(item => {
						item.integral = parseFloat(item.integral)
					})
					// 没有在加载下页数据
					this.isloading = false;
				}
			);
		},
		
		goToGood(url) {
			uni.navigateTo({
			    url
			});
		},
		
		goGoodDetail(id) {
			uni.navigateTo({
				url: `/pages/goods_details/index?id=${id}`
			});
		}
	},
	onReachBottom() {
		if (!this.bestList.length) {
			return;
		}
		// 判断当前是否正在请求数据中
		if (this.isloading) {
			return;
		}
		if (this.pagesize * this.pagenum >= this.total) {
			this.isover = true;
			return;
		}
		this.pagenum++;
		this.getProductBest();
	}
};
</script>

<style lang="less">
.faddishBaner {
	height: 346rpx;
	.swiper {
		height: 100%;
		.swiperItem {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
	}
}

.faddishBody {
	margin-top: 20rpx;
	padding: 0 20rpx;
	.faddishList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.faddishItem {
			display: flex;
			flex-direction: column;
			width: 346rpx;
			background: #ffffff;
			border-radius: 20px;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			.itemTop {
				width: 100%;
				height: 346rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				image {
					width: 100%;
					height: 346rpx;
					border-radius: 20rpx 20rpx 0px 0px;
				}
			}
			.itemDtail {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				padding: 25rpx 20rpx 0;
				.itemTitle {
					width: 100%;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// white-space: nowrap;
					font-size: 28rpx;
					color: #232323;
				}
				.itemOriginal {
					margin: 15rpx 0;
					font-size: 24rpx;
					color: #9a9a9a;
					text:nth-child(2) {
						text-decoration: line-through;
						margin-left: 15rpx;
					}
				}
				.itemBtm {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #000000;
					.itemShop {
						width: 43rpx;
						height: 43rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	.notAvailable {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 200rpx;
		font-size: 24rpx;
		color: #666;
	}
	.over_line {
		text-align: center;
		background-color: #f5f5f5;
		font-size: 26rpx;
		color: #999;
		padding: 20rpx 0;
	}
}
</style>
